<template>
  <!-- 配置项这里都加冒号意思是要的布尔类型和数字类型的，而非是字符串的 -->
  <div id="app">
    <div class="container">
      <carousel
        :autoplay="true"
        :duration="3000"
        :initial="1"
        :hasDot="true"
        :hasDirector="true"
      >
        <car-item v-for="(item, index) of carData" :key="index">
          <img :src="require(`./assets/img/${item.img_name}`)" />
        </car-item>
        <car-item :key="4">
          <video
            src="/Users/zhongweisheng/learn/CSS/grid布局学习/resources/videos/working-man.mp4"
            muted
            autoplay
            loop
          ></video>
        </car-item>
      </carousel>
    </div>
  </div>
</template>
<script>
import carData from "@/data/carousel";
export default {
  setup() {
    return {
      carData,
    };
  },
};
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>
